<template>
  <view>
    <uni-nav-bar leftText="" :leftWidth="0" :rightWidth="0" backgroundColor="#fff" left-icon="" right-icon=""
      :fixed="true" :border="false" :statusBar="true" paddingLeft="0px" paddingRight="0px">
      <view style="width: 100%;display: flex;align-items: center;">
        <uni-search-bar class="nav-search" v-model="searchVal" placeholder="搜索" radius="8" :focus="true"
          cancelButton="none" fontColor="#4e5969" @clear="handleClear" @confirm="handleSearch">
        </uni-search-bar>
      </view>
    </uni-nav-bar>
    <view class="tab-sticky">
      <u-tabs name="categoryName" :height="100" style="width: 100%" bgColor="#fff" :showBar="true" :isScroll="true"
        tabBarColor="#C61323" active-color="#1F242E" inactive-color="#4E5969" :list="categoryList"
        :current="curCategoryIndex" @change="handleCategoryChange"></u-tabs>
    </view>
    <view class="goods-list" v-if="goodsList && goodsList.length > 0">
      <view class="goods-item" v-for="goodsItem in goodsList" :key="goodsItem.id" @click="handleGoodsDetail(goodsItem)">
        <image mode="aspectFill" class="goods-item-img" :src="goodsItem.goodsCoverImg" />
        <view class="goods-item-name-price">
          <view class="goods-item-name"> {{ goodsItem.goodsName }}</view>
          <view class="goods-item-price">
            <text class="goods-item-price-0">¥</text>
            <text class="goods-item-price-1">{{ goodsItem.sellingPrice || 0 }}</text>
            <text class="goods-item-price-2">¥{{ goodsItem.originalPrice || 0 }}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>

import { onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app';

import { listGoodsCategory, listGoods } from '@/api/goods.js';

import config from '@/api/config.js';

import { toPage } from '@/utils/app';

/**搜索相关 */
const searchVal = ref('');
const handleClear = () => {
  listGoodsReq();
};
const handleSearch = () => {
  listGoodsReq();
};

/**商品分类相关 */
const curCategoryIndex = ref(0);
const curCategoryId = ref();
const categoryList = ref([]);

const listGoodsCategoryReq = async () => {
  const res = await listGoodsCategory();
  const data = res.data || [];
  if (data.length > 0) {
    curCategoryId.value = data[0].id;
  }
  curCategoryIndex.value = 0
  categoryList.value = data;
  listGoodsOnRefresh()
};

const handleCategoryChange = (index) => {
  if (curCategoryIndex.value === index) {
    return;
  }
  curCategoryIndex.value = index;
  curCategoryId.value = categoryList.value[index].id;
  listGoodsOnRefresh();
};

/**商品相关 */
const goodsTotal = ref(0);
const goodsPageNo = ref(1);
const goodsHasMore = ref(false);
const goodsList = ref([]);

const listGoodsOnRefresh = () => {
  goodsPageNo.value = 1;
  goodsHasMore.value = false;
  goodsTotal.value = 0;
  listGoodsReq(1);
}

const listGoodsReq = async (pageNo) => {
  const res = await listGoods(pageNo, curCategoryId.value, searchVal.value);
  const rows = res.rows || [];
  if (pageNo > 1) {
    goodsList.value.push(...rows);
  } else {
    goodsList.value = rows;
  }
  goodsTotal.value = res.total;
  if (res.total < 10) {
    goodsHasMore.value = false;
  } else {
    goodsHasMore.value = true;
  }
  goodsPageNo.value = pageNo;
};




const handleGoodsDetail = (item) => {
  toPage('/pages/goods/goods-detail?goodsId=' + item.id);
};

onPullDownRefresh(() => {
  listGoodsCategoryReq()
  setTimeout(function () {
    uni.stopPullDownRefresh();
  }, 800);
})

onMounted(() => {
  listGoodsCategoryReq();
});

// 上拉加载更多
onReachBottom(() => {
  if (goodsHasMore.value) {
    const pageNo = goodsPageNo.value + 1;
    listGoodsReq(pageNo);
  }
});

</script>

<style scoped lang="scss">
.nav-search {
  display: flex;
  align-items: center;
  flex: 1;
  margin: 0 -20rpx;
}

.tab-sticky {
  width: 100%;
  position: fixed;
  z-index: 2;
}

.goods-list {
  display: flex;
  flex-wrap: wrap;
  margin-top: 100rpx;
  padding-bottom: 100rpx;

  .goods-item {
    border-radius: 8rpx;
    background: #ffffff;
    width: 340rpx;
    margin-top: 24rpx;

    .goods-item-img {
      width: 340rpx;
      height: 340rpx;
      border-top-left-radius: 8rpx;
      border-top-right-radius: 8rpx;
      background-color: #eeeeee;
    }

    .goods-item-name-price {
      padding: 24rpx;
      display: flex;
      flex-direction: column;

      .goods-item-name {
        color: #1d2129;
        font-family: PingFang SC;
        font-weight: 500;
        font-size: 28rpx;
        line-height: 40rpx;
        height: 80rpx;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }

      .goods-item-price {
        display: flex;
        align-items: flex-end;
        margin-top: 12rpx;

        .goods-item-price-0 {
          color: #c61323;
          font-family: DINPro;
          font-weight: 500;
          font-size: 24rpx;
          margin-bottom: 4rpx;
        }

        .goods-item-price-1 {
          color: #c61323;
          font-family: DINPro;
          font-weight: 500;
          font-size: 36rpx;
          margin: 0 4rpx;
        }

        .goods-item-price-2 {
          color: #828b94;
          font-family: DINPro;
          font-weight: 500;
          font-size: 24rpx;
          text-decoration: line-through;
          margin-bottom: 4rpx;
        }
      }
    }
  }

  .goods-item:nth-child(2n + 1) {
    margin-left: 24rpx;
    margin-right: 10rpx;
  }

  .goods-item:nth-child(2n + 2) {
    margin-left: 10rpx;
    margin-right: 24rpx;
  }
}
</style>
